<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../logo.svg" />
    <title>收集表单数据</title>
    <style>
      form > div {
        margin-top: 1em;
        margin-bottom: 1em;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <form @submit.prevent="submit">
        <div>
          <label
            >账号：
            <input type="text" v-model.trim="userInfo.account" />
          </label>
        </div>

        <div>
          <label
            >密码：
            <input type="password" v-model="userInfo.password" />
          </label>
        </div>

        <div>
          <label
            >性别：
            <label
              ><input
                type="radio"
                name="gender"
                value="male"
                v-model="userInfo.gender"
              />男</label
            >
            <label
              ><input
                type="radio"
                name="gender"
                value="female"
                v-model="userInfo.gender"
              />女</label
            >
          </label>
        </div>

        <div>
          <label
            >年龄：
            <input type="number" v-model.number="userInfo.age" />
          </label>
        </div>

        <div>
          <label
            >爱好：
            <label
              ><input
                type="checkbox"
                value="抽烟"
                v-model="userInfo.hobby"
              />抽烟</label
            >
            <label
              ><input
                type="checkbox"
                value="喝酒"
                v-model="userInfo.hobby"
              />喝酒</label
            >
            <label
              ><input
                type="checkbox"
                value="烫头"
                v-model="userInfo.hobby"
              />烫头</label
            >
          </label>
        </div>

        <div>
          <label
            >所属校区：
            <select v-model="userInfo.region">
              <option value="">--请选择--</option>
              <option value="广州">广州</option>
              <option value="上海">上海</option>
              <option value="火星">火星</option>
            </select>
          </label>
        </div>

        <div>
          <label
            >其它信息：
            <textarea v-model.lazy="userInfo.other"></textarea>
          </label>
        </div>

        <div>
          <label>
            <input type="checkbox" v-model="userInfo.agree" /> 阅读并接受《<a
              href="https://google.com"
              target="_blank"
              >服务条款</a
            >》
          </label>
        </div>

        <div>
          <button>提交</button>
        </div>
      </form>
    </div>

    <script src="../../vue.js"></script>
    <script>
      Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。

      new Vue({
        el: "#root",
        data: {
          userInfo: {
            account: "",
            password: "",
            gender: "female",
            hobby: [],
            region: "",
            other: "",
            agree: false,
            age: "",
          },
        },
        methods: {
          submit() {
            console.log(JSON.stringify(this.userInfo));
          },
        },
      });
    </script>
  </body>
</html>
